<template>
  <div class="sc" @scroll="scrollFn" ref="scroll">
    <!-- 文章列表 -->
    <van-cell-group>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.id"
          @click="$router.push({ path: '/details', query: { id: item.id } })"
        >
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title van-multi-ellipsis--l2">
              {{ item.title }}
            </span>
          </template>
          <!-- 使用 label 插槽来自定义标题下方内容 -->
          <template #label>
            <span class="custom-title van-multi-ellipsis--l2">
              {{ item.description }}
            </span>
            <div class="collect">
              <span>
                <van-icon name="eye" />
                收藏({{ item.lovenum }})
              </span>
              <span>
                <van-icon name="good-job" />
                点赞({{ item.click }})
              </span>
            </div>
          </template>
          <!-- 使用 right-icon 插槽来自定义右侧图片 -->
          <template #right-icon>
            <van-image
              height="80px"
              :src="'http://124.223.14.236:8060/' + item.pic"
            />
          </template>
        </van-cell>
      </van-list>
    </van-cell-group>
  </div>
</template>

<script>
import { getArticleList } from '@/api/articleList'

export default {
  props: ['id'],
  data() {
    return {
      loading: false,
      finished: false,
      list: [],
      page: 1,
      scrollTop: 0
    }
  },
  methods: {
    async onLoad() {
      const res = await getArticleList(this.page, this.id)
      this.loading = false
      this.page++
      this.list = [...this.list, ...res.data.list.data]
      if (res.data.list.data.length === 0) {
        this.finished = true
      }
    },
    scrollFn() {
      console.log(this.$refs.scroll.scrollTop)
      this.scrollTop = this.$refs.scroll.scrollTop
    }
  },
  activated() {
    this.$refs.scroll.scrollTop = this.scrollTop
  }
}
</script>

<style lang="less" scoped>
.sc {
  height: 100%;
  overflow-y: scroll;
}
.van-image {
  width: 100px;
  margin-left: 20px;
}
</style>
